{% extends "base.html" %}

{% block content %}
<style>
    .login-card {
        background: #ffffff;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        max-width: 450px;
        margin: 50px auto;
    }
    .login-card:hover {
        transform: translateY(-5px);
    }
    .form-control {
        border-radius: 25px;
        padding: 12px 20px;
        border: 2px solid #eee;
        transition: all 0.3s ease;
    }
    .form-control:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.2);
    }
    .btn-login {
        border-radius: 25px;
        padding: 12px 30px;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
        color: white;
        font-weight: bold;
        letter-spacing: 1px;
        transition: all 0.3s ease;
    }
    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
    }
    .login-title {
        color: var(--primary-color);
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center;
    }
    .login-icon {
        font-size: 3em;
        color: var(--secondary-color);
        margin-bottom: 20px;
        text-align: center;
    }
    .register-link {
        color: var(--secondary-color);
        transition: all 0.3s ease;
    }
    .register-link:hover {
        color: var(--primary-color);
        text-decoration: none;
    }
</style>

<div class="login-card p-4 animate__animated animate__fadeIn">
    <div class="login-icon">
        <i class="fas fa-running"></i>
    </div>
    <h3 class="login-title">欢迎回来</h3>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    
    <form method="POST" action="{{ url_for('login') }}">
        <div class="mb-4">
            <div class="input-group">
                <span class="input-group-text bg-transparent border-end-0">
                    <i class="fas fa-user text-muted"></i>
                </span>
                <input type="text" class="form-control border-start-0" 
                       id="username" name="username" placeholder="请输入用户名" required>
            </div>
        </div>
        <div class="mb-4">
            <div class="input-group">
                <span class="input-group-text bg-transparent border-end-0">
                    <i class="fas fa-lock text-muted"></i>
                </span>
                <input type="password" class="form-control border-start-0" 
                       id="password" name="password" placeholder="请输入密码" required>
            </div>
        </div>
        <div class="d-grid gap-2 mb-4">
            <button type="submit" class="btn btn-login">
                登录 <i class="fas fa-arrow-right ms-2"></i>
            </button>
        </div>
        <div class="text-center">
            <p class="mb-0">还没有账号？ 
                <a href="{{ url_for('register') }}" class="register-link">立即注册</a>
            </p>
        </div>
    </form>
</div>
{% endblock %}
